<template>
	<view>
		<u-navbar :is-back="true" title="路线查询"></u-navbar>
		<view class="top_box">
			<view class="search">
				<!-- 使用时间轴 -->
				<u-time-line style='height: 20rpx;'>
					<u-time-line-item node-top="10">
						<!-- 自定义左边小圆点部分 -->
						<template v-slot:node>
							<view class="u-node u-node1"></view>
						</template>
						<template v-slot:content>
							<u-input v-model="origin" type="text" :border="false" placeholder='我的位置'
								style='margin-top: -10rpx;' @input='originInput' />
						</template>
					</u-time-line-item>
					<u-time-line-item node-top="25">
						<template v-slot:node>
							<view class="u-node u-node2"></view>
						</template>

						<template v-slot:content>
							<u-input v-model="destination" type="text" :border="false" placeholder='目的地址'
								@input='destinationInput' />
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			<!-- 四种出行路线 -->
			<view class="route_type">
				<view :class="useFlag=='isDriving'?'click_type_item':'type_item '" @click="useDriving">
					<i class="iconfont icon-qiche"></i>
					<text>驾车</text>
				</view>
				<view :class="useFlag=='isTransit'?'click_type_item':'type_item'" @click="useTransit">
					<i class="iconfont icon-gongjiaocher"></i>
					<text>公交</text>
				</view>
				<view :class="useFlag=='isWalking'?'click_type_item':'type_item'" @click="useWalking">
					<i class="iconfont icon-buhang"></i>
					<text>步行</text>
				</view>
				<view :class="useFlag=='isRiding'?'click_type_item':'type_item'" @click="useRiding">
					<i class="iconfont icon-yiliaohangyedeICON-"></i>
					<text>骑行</text>
				</view>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#F6F6F6" v-if="useFlag==''"></u-gap>
		<!-- 输入提示模块 -->
		<view class="bottom_box" v-if="showTips">
			<Tips :tipsData='tips' :tipsType='tipsType' @clickTipData='getTip'></Tips>
		</view>
		<!-- 具体的路线模块 -->
		<view class="bottom_box" v-if='showRoute'>
			<Driving v-if="useFlag=='isDriving'" :longitude='originLng' :latitude='originLat' :data='drivingData'
				:markers='markers'>
			</Driving>
			<Transit v-if="useFlag=='isTransit'" :transits='transits'></Transit>
			<Walking v-if="useFlag=='isWalking'" :longitude='originLng' :latitude='originLat' :markers='markers'
				:data='walkingData'>
			</Walking>
			<Riding v-if="useFlag=='isRiding'" :longitude='originLng' :latitude='originLat' :markers='markers'
				:data='ridingData'></Riding>
		</view>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	import Driving from '../route_driving/route_driving.vue';
	import Transit from '../route_transit/route_transit.vue';
	import Walking from '../route_walking/route_walking.vue';
	import Riding from '../route_riding/route_riding.vue';
	import Tips from '../tips/tips.vue'
	import {
		key
	} from '../../common/map-key.js'
	import '@/static/iconfont/iconfont.css'

	export default {
		components: {
			Driving,
			Transit,
			Walking,
			Riding,
			Tips
		},
		data() {
			return {
				amapPlugin: null,
				polyline: [],
				value: '',
				useFlag: 'isDriving', //使用什么出行方式
				markers: [],

				//起点
				origin: '',
				originLng: '',
				originLat: '',
				originLocation: '',
				//终点
				destination: '',
				destinationLng: '',
				destinationLat: '',
				destinationLocation: '',

				transits: [], //公交地铁路线
				showTips: false, //是否显示输入提示模块
				tips: [], //提示列表数组
				tipsType: '', //传入是起点还是终点
				colorList: ['#fa3534', '#ff9900', '#19be6b', '#909399'], //彩虹蚯蚓线

				drivingDistance: 0,
				drivingDuration: 0,
				walkingDistance: 0,
				walkingDuration: 0,
				ridingDistance: 0,
				ridingDuration: 0,

				showRoute: false, //是否显示路线map
				showTimeKm: false, //是否显示时间距离

				drivingData: {},
				walkingData: {},
				ridingData: {}
			}
		},
		onLoad(option) {
			this.amapPlugin = new amap.AMapWX({
				key: key
			});

			let type = uni.getStorageSync('search_type')
			if (type === 'go_type') {
				let originInfo = uni.getStorageSync('originInfo')
				this.origin = originInfo.name
				this.originLng = originInfo.longitude
				this.originLat = originInfo.latitude
				this.originLocation = originInfo.longitude + "," + originInfo.latitude
				this.destination = this.$store.getters.getDestination
				this.destinationLng = this.$store.getters.getDestinationLng
				this.destinationLat = this.$store.getters.getDestinationLat
				this.destinationLocation = this.destinationLng + "," + this.destinationLat
				this.showRoute = true
				setTimeout(() => {
					this.useDriving()
				}, 1000)
			} else if (type === 'go_route') {
				this.origin = this.$store.getters.getOrigin
				this.originLng = this.$store.getters.getOriginLng
				this.originLat = this.$store.getters.getOriginLat
				this.originLocation = this.originLng + "," + this.originLat
			}
		},

		methods: {
			//起点输入框事件，获取tips列表
			originInput(e) {
				let _this = this
				_this.tips = []
				_this.showTips = true
				_this.showRoute = false
				_this.showTimeKm = false
				_this.amapPlugin.getInputtips({
					keywords: e,
					success: function(data) {
						_this.tips = data.tips
						_this.tipsType = 'origin'
					},
					fail: function(info) {
						console.log('fail', info)
					}
				})
			},

			//终点输入框事件，获取tips列表
			destinationInput(e) {
				let _this = this
				_this.tips = []
				_this.showTips = true
				_this.showRoute = false
				_this.showTimeKm = false
				_this.amapPlugin.getInputtips({
					keywords: e,
					success: function(data) {
						_this.tips = data.tips
						_this.tipsType = 'destination'
					},
					fail: function(info) {
						console.log('fail', info)
					}
				})
			},

			//获取输入地址联想列表
			getTip(data) {
				console.log(data.data)
				if (data.tipType == 'origin') {
					this.origin = data.data.name
					this.originLocation = data.data.location
					this.originLng = this.originLocation.split(',')[0]
					this.originLat = this.originLocation.split(',')[1]
					//如果还没有选择目的地址，就先清空tips列表，否则就关闭tips列表节点
					if (this.destination == '') {
						this.tips = []
					} else {
						this.showTips = false
						this.showRoute = true
						this.drawRoute()
					}
				} else if (data.tipType == 'destination') {
					this.destination = data.data.name
					this.destinationLocation = data.data.location
					this.destinationLng = this.destinationLocation.split(',')[0]
					this.destinationLat = this.destinationLocation.split(',')[1]

					//如果还没有选择起点位置，就先清空tips列表，否则就关闭tips列表节点
					if (this.origin == '') {
						this.tips = []
					} else {
						this.showTips = false
						this.showRoute = true
						this.drawRoute()
					}
				}
			},
			//根据出行方式，自动选择
			drawRoute() {
				switch (this.useFlag) {
					case 'isDriving':
						this.useDriving()
						break;
					case 'isTransit':
						this.useTransit()
						break;
					case 'isWalking':
						this.useWalking()
						break;
					case 'isRiding':
						this.useRiding()
						break;
				}
			},

			useDriving() {
				let _this = this
				_this.useFlag = 'isDriving'
				_this.drivingData = {}
				_this.showTimeKm = false
				_this.markers = []
				_this.polyline = []
				uni.showLoading({
					title: '获取信息中'
				});
				_this.amapPlugin.getDrivingRoute({
					origin: _this.originLocation,
					destination: _this.destinationLocation,
					success: function(data) {
						console.log('驾车路线', data)
						_this.drivingData = data
						_this.showTimeKm = true

						_this.markers.push({
							id: 1,
							latitude: _this.originLat,
							longitude: _this.originLng,
							width: 20,
							height: 30,
							label: {
								content: _this.origin,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_s.png'
						}, {
							id: 2,
							latitude: _this.destinationLat,
							longitude: _this.destinationLng,
							width: 20,
							height: 30,
							label: {
								content: _this.destination,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_e.png'
						}, )

						uni.hideLoading();
					},
					fail: function(info) {
						console.log('失败回调', info)
					}
				})
			},
			useTransit() {
				let _this = this
				_this.useFlag = 'isTransit'
				_this.transits = null
				uni.showLoading({
					title: '获取信息中'
				});

				_this.amapPlugin.getTransitRoute({
					origin: _this.originLocation,
					destination: _this.destinationLocation,
					city: uni.getStorageSync('city'),
					success: function(data) {
						console.log('公交数据', data)
						if (data && data.transits) {

							_this.transits = data.transits;
							for (var i = 0; i < _this.transits.length; i++) {
								var segments = _this.transits[i].segments;
								_this.transits[i].transport = [];
								for (var j = 0; j < segments.length; j++) {
									if (segments[j].bus && segments[j].bus.buslines && segments[j].bus
										.buslines[0] && segments[j].bus.buslines[0].name) {
										var name = segments[j].bus.buslines[0].name
										let new_name = name.split('(')[0]

										//.type=地铁线路,普通公交线路

										_this.transits[i].transport.push(new_name);
									}
								}
							}
						}
						if (data.taxi_cost == '0') {
							_this.transits = []
						}
						uni.hideLoading();
					},
					fail: function(err) {
						console.log(err)
						uni.showToast({
							title: err,
							duration: 1000
						})
						uni.hideLoading();
					}
				})

			},
			useWalking() {
				let _this = this
				_this.useFlag = 'isWalking'
				_this.walkingData = {}
				_this.markers = []
				_this.polyline = []
				uni.showLoading({
					title: '获取信息中'
				});

				_this.amapPlugin.getWalkingRoute({
					origin: _this.originLocation,
					destination: _this.destinationLocation,
					success: function(data) {
						console.log('步行数据：', data)
						_this.walkingData = data
						_this.showTimeKm = true

						_this.markers.push({
							id: 1,
							latitude: _this.originLat,
							longitude: _this.originLng,
							width: 20,
							height: 30,
							label: {
								content: _this.origin,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_s.png'
						}, {
							id: 2,
							latitude: _this.destinationLat,
							longitude: _this.destinationLng,
							width: 20,
							height: 30,
							label: {
								content: _this.destination,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_e.png'
						}, )
						uni.hideLoading();
					},
					fail: function(info) {
						console.log(info)
					}
				})
			},
			useRiding() {
				let _this = this
				_this.useFlag = 'isRiding'
				_this.ridingData = {}
				_this.markers = []
				_this.polyline = []
				uni.showLoading({
					title: '获取信息中'
				});

				_this.amapPlugin.getRidingRoute({
					origin: _this.originLocation,
					destination: _this.destinationLocation,
					success: function(data) {
						console.log('骑行路线', data)
						_this.ridingData = data
						_this.showTimeKm = true

						_this.markers.push({
							id: 1,
							latitude: _this.originLat,
							longitude: _this.originLng,
							width: 20,
							height: 30,
							label: {
								content: _this.origin,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_s.png'
						}, {
							id: 2,
							latitude: _this.destinationLat,
							longitude: _this.destinationLng,
							width: 20,
							height: 30,
							label: {
								content: _this.destination,
								color: '#000000'
							},
							iconPath: '../../static/marker/mapicon_navi_e.png'
						}, )
						uni.hideLoading();
					},
					fail: function(info) {
						console.log(info)
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.top_box {
		height: 18.5vh;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
	}

	.search {
		width: 90vw;
		background-color: #F6F6F6;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 2rpx 40rpx 40rpx 40rpx;
	}

	.u-node {
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-node1 {
		background-color: #22D78B;
	}

	.u-node2 {
		background-color: #FD6749;
	}

	/deep/.u-time-axis {
		margin-top: 30rpx;
		height: 135rpx;
	}

	/deep/.u-input__input {
		margin-top: -4rpx;
	}

	/* 出行选择 */
	.route_type {
		width: 90vw;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		color: #666666;

		.iconfont {
			margin-right: 10rpx;
		}
	}

	.click_type_item {
		padding: 10rpx 20rpx;
		background-color: #5790FC;
		border-radius: 20rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
	}

	.type_item {
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.bottom_box {
		height: 67vh;
		// background-color: #22D78B;
		overflow-y: auto;
	}
</style>
